<template>
    <div class="page-content page-content-flag">
        <div class="information-banner">
            <img src="https://oss.goktech.cn/project-job/gkkj-xinan.png"/>
        </div>
        <div class="information-content"> 
            <!-- <div class="information-intro">
                <div class="title">
                    <i class="fa fa-users"></i>
                    <div class="title-name">大赛介绍</div>
                </div>
                <div class="intro-content">
                    <div class="intro-nr">
                    需提供文案，线上学习平台介绍和赛事介绍等，建议300字以内met, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                    </div>
                    <div class="more-intro" @click="goKnow('https://www.dolcn.com/archives/17801')">
                        <div class="title-name">了解更多</div>
                        <i class="fa fa-angle-right"></i> 
                    </div>
                </div>
            </div> -->
            <div class="information-excellentcourse">
                <div class="excellentcourse-item">
                    <div class="title">
                        <i class="fa fa-book"></i> 
                        <div class="title-name">赛前指导课</div>
                    </div>
                    <div class="excellentcourse-content">
                        <img src="/img/informationSave/course1.png" @click="goKnow('https://edu.goktech.cn/excellent-course/detail?courseId=150226106358890496')"/>
                        <img src="/img/informationSave/course2.png" @click="goKnow('https://edu.goktech.cn/excellent-course')"/>
                    </div>
                </div>
                <div class="excellentcourse-item">
                    <div class="title">
                        <i class="fa fa-shield"></i> 
                        <div class="title-name">国科精品信安课程</div>
                    </div>
                    <div class="excellentcourse-content">
                        <img src="/img/informationSave/course3.png" @click="goKnow('https://edu.goktech.cn/excellent-course/detail?courseId=153163314577473536')"/>
                        <img src="/img/informationSave/course4.png" @click="goKnow('https://edu.goktech.cn/excellent-course/detail?courseId=150164591316500480')"/>
                    </div>
                </div>
            </div>
            <div class="more-btn-container">
                <div class="more-btn" @click="goKnow('https://edu.goktech.cn/tenant/55673562710740992/')">更多精品课程</div>
                <div class="more-btn" @click="goKnow('https://oss.goktech.cn/%E9%99%84%E4%BB%B6%E4%B8%80%EF%BC%9A%E5%9B%BD%E7%A7%91%E6%95%99%E5%AD%A6%E5%B9%B3%E5%8F%B0-%E5%AD%A6%E7%94%9F%E7%AB%AF%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E8.27.docx')">国科教学平台使用说明</div>
            </div>
            <div class="information-excellentchose">
                <div class="title">
                    <i class="fa fa-users"></i>
                    <div class="title-name">精选信安岗位</div>
                </div>
                <div class="excellentchose-content">
                    <img src="/img/informationSave/xinan1.png" @click="goKnow('https://job.goktech.cn/getJob')"/>
                    <img src="/img/informationSave/xinan2.png" @click="goKnow('https://job.goktech.cn/getJob')"/>
                    <img src="/img/informationSave/xinan3.png" @click="goKnow('https://job.goktech.cn/getJob')"/>
                </div>
                <div class="excellentchose-content">
                    <img src="/img/informationSave/xinan4.png" @click="goKnow('https://job.goktech.cn/getJob')"/>
                    <img src="/img/informationSave/xinan5.png" @click="goKnow('https://job.goktech.cn/getJob')"/>
                    <img src="/img/informationSave/xinan6.png" @click="goKnow('https://job.goktech.cn/getJob')"/>
                </div>
            </div>
            <div class="more-btn-container">
                <div class="more-btn" @click="goKnow('https://job.goktech.cn/doubleElection')">就业双选会 GO!</div>
            </div>
        </div>
    </div>
</template>
<script>
import dom from '@/api/dom'
export default {
  layout: 'rest',
  head () {
    return {
      title: '信息安全',
      meta: [
        { hid: 'baidu-site-verification', name: 'baidu-site-verification', content:'T7mU7Yw8NB' },
        { hid: 'keywords', name: 'keywords', content: '国科教育，在线教育，IT人才培养，IT培训，软件开发培训，编程培训，软件工程师培训班，成都IT培训机构，程序员培训机构' },
        { hid: 'description', name: 'description', content: '国科科技业务涉及校企产教融合合作运营，校企联合IT人才培 养服务，智慧校园建设与运营。专注于对IT产业知识的理解和把握，定位产教融合人才解决方案提供者和服务者的角色，积极整合地方高校与IT产业链多环节资源，合作高校服务于产业，为高校和企业客户 提供优质的人才服务和项目服务。' }
      ]
    }
  },
  data () {
    return {
      
    }
  },
  mounted () {
    document.querySelector('.page-content').style.minHeight = dom.getHeight()
  },
  methods: {
    goKnow(val)
    {
        window.open(val,'_blank')
    }
  }
}
</script>
<style lang="stylus" scoped>
.page-content
{
    background: rgba(242, 242, 242, 1);
    padding-bottom:1px
}
.information-banner
{
    min-width:1200px;
    height:120px;
    margin: 58px auto 30px;
    position: relative;
    overflow: hidden;
    img 
    {
        position: absolute;
        height: 100%;
        left: -9999px;
        right: -9999px;
        top: -9999px;
        bottom: -9999px;
        margin: auto;
    }
}
.information-content
{
    width:1200px;
    margin:0 auto
    .information-intro
    {
        .intro-content
        {
            padding:53px 20px;
            background:#fff;
            font-size: 14px;
            .more-intro
            {
                display:flex;
                justify-content:flex-end;
                cursor:pointer;
                color: rgba(129, 211, 248, 0.996);
                align-items: center;
                .title-name
                {
                    margin-right:5px
                }
            }
        } 
    }
    .title
    {
        display:flex;
        align-items:center;
        height: 48px;
        .title-icon
        {
            width:15px;
            height:15px;
            margin-right:10px
        }
        .title-name
        {
            font-weight: 700;
            font-size: 18px;
        }
        .fa-users
        {
            color: #02A7F0;
            margin-right: 5px;
        }
        .fa-book
        {
            color: #02A7F0;
            margin-right: 5px;
        }
        .fa-shield
        {
            color: rgb(253,105,76);
            margin-right: 5px;
        }
    }
    .information-excellentcourse
    {
        display:flex;
        justify-content:space-between;
        margin-top:50px
        .excellentcourse-item
        {
            border-top:3px solid rgb(0, 0, 255);
            padding:20px 20px;
            background: #fff;
            img
            {
                cursor:pointer;
                &:hover
                {
                    transition: all 0.2s linear;
                    background:linear-gradient(360deg,rgba(243,246,248,1) 0%,rgba(230,238,243,1) 100%);
                    box-shadow:0px 10px 30px 0px rgba(0,0,0,0.2);
                }
            }
            &:last-child
            {
                border-top:3px solid rgb(253,105,76)
            }
            .excellentcourse-content
            {
                img 
                {
                    width:265px;
                    height:308px;
                    margin-right:15px;
                    &:last-child
                    {
                        margin-right:0
                    }
                }
            }
        }
    }
    .more-btn-container{
        display: flex;
    }
    .more-btn
    {
        display: inline-block;
        width:203px;
        height:43px;
        line-height:43px;
        text-align:center;
        border-radius:62px;
        background: linear-gradient(101.680260148566deg, rgba(2, 167, 240, 1) -2%, rgba(128, 128, 255, 1) 100%);
        color:#fff;
        margin:30px auto;
        cursor:pointer
        &:hover
        {
            transition: all 0.2s linear;
            box-shadow:0px 10px 30px 0px rgba(0,0,0,0.2);
        }
    }
    .information-excellentchose
    {
        border-top: 1px solid rgb(215, 215, 215);
        .excellentchose-content
        {
            display:flex;
            justify-content:space-between;
            width:100%;
            margin-bottom:15px
            &:last-child
            {
                margin-bottom:0px
            }
            img
            {
                width:390px;
                height:193px;
                margin-right: 10px;
                cursor:pointer;
                &:last-child
                {
                    margin-right: 0px
                }
                &:hover
                {
                    transition: all 0.2s linear;
                    background:linear-gradient(360deg,rgba(243,246,248,1) 0%,rgba(230,238,243,1) 100%);
                    box-shadow:0px 10px 30px 0px rgba(0,0,0,0.2);
                }
            }
        }
    }
}
</style>